{% extends "base.html" %}
{% load static %}

{% block title %}TestBrain - 测试用例生成{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        测试用例生成
    </div>
    <div class="card-body">
        <form id="generate-form" method="post">
            {% csrf_token %}
            
            <div class="form-group mb-3">
                <label for="llm-provider">选择大模型:</label>
                <select class="form-control" id="llm-provider" name="llm_provider">
                    {% for provider_key, provider_config in llm_providers.items %}
                        <option value="{{ provider_key }}" {% if llm_provider == provider_key %}selected{% endif %}>
                            {{ provider_config.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label id="input-text-label" for="input-text">需求描述:</label>
                <textarea id="input-text" name="requirements" class="form-control" rows="10" required>{{ requirements }}</textarea>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="case_design_method">测试用例设计方法:</label>
                    <select class="form-control selectpicker" id="case_design_methods" name="case_design_methods" multiple data-live-search="true">
                        <option value="equivalence_partitioning">等价类划分法</option>
                        <option value="boundary_value">边界值分析法</option>
                        <option value="decision_table">判定表法</option>
                        <option value="cause_effect">因果图法</option>
                        <option value="orthogonal_array">正交分析法</option>
                        <option value="scenario">场景法</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="case_categories">用例类型:</label>
                    <select class="form-control selectpicker" id="case_categories" name="case_categories" multiple data-live-search="true">
                        <option value="functional">功能测试</option>
                        <option value="performance">性能测试</option>
                        <option value="compatibility">兼容性测试</option>
                        <option value="security">安全性测试</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="case_count">生成用例条数:
                        <i class="fas fa-info-circle text-primary" 
                           data-toggle="tooltip" 
                           data-html="true"
                           data-placement="right"
                           data-original-title="1. 由于大模型机制所限，大模型不一定返回足够数量的用例，比如你指定了100条，但大模型可能仅返回20条。<br>2. 大模型所需生成用例数量越多，耗时越久。">
                        </i>
                    </label>
                    <select class="form-control" id="case_count" name="case_count">
                        <option value="10">10条</option>
                        <option value="20">20条</option>
                        <option value="30">30条</option>
                        <option value="40">40条</option>
                        <option value="50">50条</option>
                        <option value="60">60条</option>
                        <option value="70">70条</option>
                        <option value="80">80条</option>
                        <option value="90">90条</option>
                        <option value="100">100条</option>
                    </select>
                </div>
            </div>
            
            <div class="text-right">
                <button type="submit" id="generate-button" class="btn btn-primary">生成测试用例</button>
            </div>
        </form>
        
        <div id="loading-indicator" style="display: none;" class="text-center mt-3">
            <div class="spinner"></div>
            <p>正在生成测试用例，请稍候...</p>
        </div>
    </div>
</div>

{% if test_cases %}
<div id="result-container" class="mt-4">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">生成的测试用例</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th width="5%">编号</th>
                            <th width="25%">测试用例描述</th>
                            <th width="35%">测试步骤</th>
                            <th width="35%">预期结果</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for test_case in test_cases %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ test_case.description }}</td>
                                <td>
                                    {% for step in test_case.test_steps %}
                                        <div class="mb-2">{{ step }}</div>
                                    {% endfor %}
                                </td>
                                <td>
                                    {% for result in test_case.expected_results %}
                                        <div class="mb-2">{{ result }}</div>
                                    {% endfor %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{# 修改 JSON 数据的存储方式 #}
{{ test_cases|json_script:"test-cases-data" }}

<div class="text-right mt-3" id="save-container">
    <button id="save-button" class="btn btn-success">保存测试用例</button>
</div>
{% endif %}

<style>
.bootstrap-select .dropdown-menu li a {
    position: relative;
    padding-left: 40px !important;
}

.bootstrap-select .dropdown-menu li a:before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 1px solid #aaa;
    background: white;
}

.bootstrap-select .dropdown-menu li.selected a:before {
    content: '✓';
    text-align: center;
    line-height: 14px;
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.bootstrap-select .dropdown-toggle {
    background-color: white;
    border: 1px solid #ced4da;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

.filter-option-inner-inner {
    color: #495057;
}

/* 搜索框样式 */
.bs-searchbox .form-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* 全选/取消全选按钮样式 */
.bs-actionsbox {
    padding: 8px;
}

.bs-actionsbox .btn-group button {
    width: 50%;
}

/* 自定义 tooltip 样式 */
.tooltip-inner {
    max-width: 300px;
    padding: 10px;
    color: #fff;
    text-align: left;
    background-color: #333;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}

/* 自定义 tooltip 箭头颜色 */
.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #333;
}
</style>

{% block extra_js %}
<!-- 确保这段代码在jQuery加载完成后执行 -->
<script type="text/javascript">
    // 等待文档和所有资源加载完成
    window.addEventListener('load', function() {
        // 初始化所有的tooltip
        if (typeof $ !== 'undefined') {
            $('[data-toggle="tooltip"]').tooltip();
            
            // 初始化selectpicker
            initializeSelectPickers();
        } else {
            console.error('jQuery is not loaded');
        }
    });

    function initializeSelectPickers() {
        $('.selectpicker').selectpicker({
            style: '',
            styleBase: 'form-control',
            tickIcon: '',
            showTick: false,
            actionsBox: true,
            deselectAllText: '取消全选',
            selectAllText: '全选',
            selectedTextFormat: 'count > 2',
            countSelectedText: '已选择 {0} 项',
            noneSelectedText: '请选择'
        });

        // 自定义下拉选项的渲染
        $('.selectpicker').on('loaded.bs.select', function () {
            var $select = $(this);
            $select.next().find('.dropdown-menu li a').each(function() {
                var $a = $(this);
                var isSelected = $a.parent().hasClass('selected');
                if (isSelected) {
                    $a.addClass('selected');
                }
            });
        });

        // 处理选择变化
        $('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected) {
            var $select = $(this);
            var $option = $select.next().find('.dropdown-menu li').eq(clickedIndex).find('a');
            if (isSelected) {
                $option.addClass('selected');
            } else {
                $option.removeClass('selected');
            }
        });
    }
</script>
{% endblock %}

<!-- 在这里添加 generate.js 引用 -->
<script src="{% static 'js/generate.js' %}"></script>
{% endblock %} 